<template>
	<div class="my-map" :class="[{'isShow':isShow}]">
		<baidu-map class="map" @ready="handler"></baidu-map>
		<div class="content">
			<!--{{model}}-->
			<div style="text-align:center;width: 100%;">
				<div style="text-align:left;margin:0 auto;">
					<input type="text" id="suggestId" placeholder="请输入地点" size="20" value="百度" class="el-input__inner" />
					<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
					<div id="allmap" style="height: 360px;margin-top: 10px;"></div>
				</div>
				<div class="dialog-footer" style="text-align: right;margin-top: 10px;">
					<el-button @click="close()">关闭</el-button>
					<el-button type="primary" @click="handleSave()" autofocus>保存</el-button>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	//	import { MP } from '@/js/plugins/zry.plugins.maptool.js';
	export default {
		data() {
			return {
				map: null,
				BMap: null,
				labelPostitin: 'top',
				center: {
					lng: 0,
					lat: 0
				},
				zoom: 3,
				ac: null,
				visible: false,
				top: 0, //滚动条位置
				isShow: false,
				model: {
					address: '北京市',
					latitude: 39.914738,
					longitude: 116.403839,
					city: '北京市'
				},
				locationAddress: {
					address: null,
					latitude: 0,
					longitude: 0,
				}
			}
		},
		mounted() {},
		computed: {　　

		},
		watch: {

		},
		methods: {
			handler({
				BMap,
				map
			}) {
				this.zoom = 15;
				this.visible = true;
				this.BMap = BMap;
				this.getLocation();
				this.$nextTick(() => {
					this.setMap(BMap);
				})
			},
			show(obj = null) {
				this.top = this.getScrollTop()
				if(this.top) {
					this.setScrollTop(0)
				}
				if(obj) {
					this.model = obj;
				} else if(this.locationAddress.longitude) {
					this.model.latitude = this.locationAddress.latitude;
					this.model.longitude = this.locationAddress.longitude;
					this.model.address = this.locationAddress.address;
				}

				this.$nextTick(() => {
					this.isShow = true;
					let point = new BMap.Point(this.model.longitude, this.model.latitude);
					this.map.panTo(point)
					this.setMarker(this.model.longitude, this.model.latitude, this.map);
				})
			},
			getLocation() {
				let BMap = this.BMap;
				let that = this;
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r) {
					if(this.getStatus() == BMAP_STATUS_SUCCESS) {
						console.log(r);
						that.locationAddress.longitude = r.point.lng;
						that.locationAddress.latitude = r.point.lat;
						that.locationAddress.address = r.address.province + r.address.city
						let obj = {
							longitude: r.point.lng,
							latitude: r.point.lat,
							address: r.address.province + r.address.city,
							city: r.address.city
						}
						console.log(obj)
						that.$store.commit('changeValue', {
							name: 'locationAddress',
							value: obj
						})

					}
				}, {
					enableHighAccuracy: true
				}); //设置当前位置
			},
			getScrollTop() {
				let scrollTop = 0;
				if(document.documentElement && document.documentElement.scrollTop) {
					scrollTop = document.documentElement.scrollTop;
				} else if(document.body) {
					scrollTop = document.body.scrollTop;
				}
				return scrollTop;
			},
			setScrollTop(top) {
				if(!isNaN(top)) {
					if(document.documentElement && document.documentElement.scrollTop !== undefined) {
						document.documentElement.scrollTop = top;
					} else if(document.body) {
						document.body.scrollTop = top;
					}
				}
			},
			close() {
				this.isShow = false;
				this.setScrollTop(this.top);
			},
			handleSave() {
				this.$emit('selectBack', this.model);
				this.close();
			},
			setMap(BMap) {
				let that = this;
				var map = new BMap.Map("allmap"); // 创建Map实例
				that.map = map;
				that.setCurrentLocation(that.model.longitude, that.model.latitude, map);
				that.setMarker(that.model.longitude, that.model.latitude, map, true);
				let point = new BMap.Point(that.model.longitude, that.model.latitude);
				map.centerAndZoom(point, 18);
				map.addEventListener("moveend", function() {
					that.setMarker(map.getCenter().lng, map.getCenter().lat, map, true);
				});
				map.addEventListener("zoomend", function() {
					that.setMarker(map.getCenter().lng, map.getCenter().lat, map, true);
				});
				this.setSearch(map);
			},
			setMarker(lng, lat, map, isChange = false) {
				map.clearOverlays();
				let that = this;
				let point = new BMap.Point(lng, lat);
				var mk = new BMap.Marker(point);
				this.model.latitude = lat;
				this.model.longitude = lng;
				//				if(isChange) {
				let address;
				new BMap.Geocoder().getLocation(point, res => {
					console.log(res);
					address = res.addressComponents;
					that.model.address = res.surroundingPois.length > 0 ?
						address.province + address.city + address.district + res.surroundingPois[0].title : res.address;
					that.model.city = address.city;
					if(this.ac) {
						this.ac.setInputValue(this.model.address);
					}
				})
				//				}

				mk.disableDragging()
				map.addOverlay(mk);
			},
			setSearch(map) {

				let that = this;
				var ac = new BMap.Autocomplete( //建立一个自动完成的对象
					{
						"input": "suggestId",
						"location": map,
						'onSearchComplete': function(AutocompleteResult) {
							console.log(AutocompleteResult)
						}
					}
				);
				this.ac = ac;
				//				debugger
				//				ac.setInputValue(this.model.address);
				setTimeout(() => {
					//					ac.hide()
				}, 1000)

				function G(id) {
					return document.getElementById(id);
				}
				ac.addEventListener("onhighlight", function(e) {
					//鼠标放在下拉列表上的事件
					var str = "";
					var _value = e.fromitem.value;
					var value = "";
					if(e.fromitem.index > -1) {
						value = _value.province + _value.city + _value.district + _value.street + _value.business;
					}
					str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
					value = "";
					if(e.toitem.index > -1) {
						_value = e.toitem.value;
						value = _value.province + _value.city + _value.district + _value.street + _value.business;
					}
					str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
					G("searchResultPanel").innerHTML = str;
				});
				var myValue;
				ac.addEventListener("onconfirm", function(e) {
					//鼠标点击下拉列表后的事件
					var _value = e.item.value;
					myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
					G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
					that.model.address = myValue;
					setPlace(map);
				});

				function setPlace(map) {
					map.clearOverlays(); //清除地图上所有覆盖物
					function myFun() {
						var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
						var mk = new BMap.Marker(pp);
						that.model.longitude = pp.lng;
						that.model.latitude = pp.lat;
						map.centerAndZoom(pp, 18);
						map.addOverlay(mk); //添加标注
					}
					var local = new BMap.LocalSearch(map, {
						//智能搜索
						onSearchComplete: myFun
					});
					local.search(myValue);
				}
			},
			setCurrentLocation(lng, lat, map) {
				let that = this;
				let point = new BMap.Point(lng, lat);
				map.centerAndZoom(point, 18);
				map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
				map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
				var mk = new BMap.Marker(point);
				mk.disableDragging()
				map.addOverlay(mk);
				console.log(map.getCenter())
			}
		}
	}
</script>
<style lang="less">
	.my-map {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		opacity: 0.01;
		z-index: -1;
		
		&.isShow {
			z-index: 1111;
			opacity: 1;
			background-color: rgba(0,0,0,.5);
		}
		.content {
			margin: 15vh auto 0 auto;
			width: 60%;
			background-color: #fff;
			padding: 30px;
		}
		.dialog-footer {
			padding-top: 20px;
		}
	}
	
	.map {
		width: 4px;
		height: 3px;
		position: fixed;
		top: -1000px;
		left: 0;
	}
</style>